<template>
    <div class="fillcontain">
        <el-form :model="formData" :rules="rules" inline="true" ref="selectData"
                 class="demo-form-inline" style="margin-left: 20px">
            <el-col :span="6">
                <el-form-item label="">
                    <el-select size="mini" @change="schoolchange" style="width: 220px" v-model="selectData.schoolid"
                               placeholder="请选择校区">
                        <el-option
                            v-for="item in schoolList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-select size="mini" style="width: 220px" v-model="selectData.eid" placeholder="请选择老师">
                        <el-option
                            v-for="item in empsList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>

            <el-col :span="6">
                <el-form-item label="">
                    <el-date-picker size="mini" style="width: 220px"
                                    v-model="selectData.beginTime"
                                    align="right"
                                    type="date"
                                    placeholder="开始日期"
                                    :picker-options="pickerOptions1">
                    </el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-date-picker size="mini" style="width: 220px"
                                    v-model="selectData.endTime"
                                    align="right"
                                    type="date"
                                    value-format="timestamp"
                                    placeholder="结束日期"
                    >
                    </el-date-picker>
                </el-form-item>
            </el-col>
            <el-button type="primary" size="mini" icon="el-icon-search">搜索</el-button>
        </el-form>

            <el-form :model="formData" :rules="rules" inline="true" ref="formData"
                     class="demo-form-inline" style="margin-left: 20px">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="">
                            <el-select size="mini" style="width: 200px" v-model="formData.month" placeholder="请选择月份">
                                <el-option
                                    v-for="item in monthsList"
                                    :key="item.id"
                                    :label="item.id"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="">
                            <el-select size="mini" style="width: 200px" v-model="formData.weekOfmonth" placeholder="请选择周数">
                                <el-option
                                    v-for="item in weeksList"
                                    :key="item.id"
                                    :label="item.id"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="">
                            <el-select size="mini" style="width: 200px" v-model="formData.weekOfyear" placeholder="当年周数">
                                <el-option
                                    v-for="item in weeksList"
                                    :key="item.id"
                                    :label="item.id"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row style="">
                    <el-col :span="6">
                        <el-form-item label="总人数">
                            <el-input size="mini" v-model="formData.totaluser" placeholder="必填"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="上课人数">
                            <el-input size="mini" v-model="formData.onclassuser" placeholder="必填"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="请假人数">
                            <el-input size="mini" v-model="formData.leaveclassuser" placeholder="必填"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row style="">
                    <el-col :span="6">
                        <el-form-item label="出勤比例">
                            <el-input size="mini" v-model="formData.attendanceRate" placeholder="必填"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="试课未交费">
                            <el-input size="mini" v-model="formData.tryuser" placeholder="必填"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="转正人数">
                            <el-input size="mini" v-model="formData.tozsuser" placeholder="必填"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row style="">
                    <el-col :span="6">
                        <el-form-item label="老生续费">
                            <el-input size="mini" v-model="formData.chargeolduser" placeholder="必填"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="暂停人数">
                            <el-input size="mini" v-model="formData.stopuser" placeholder="必填"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="交费总数">
                            <el-input size="mini" v-model="formData.chargeuser" placeholder="必填"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row style="">
                    <el-col :span="6">
                        <el-form-item label="学费收入">
                            <el-input size="mini" v-model="formData.totalcharge" placeholder="必填"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col  offset="10" :span="10">
                        <el-button type="primary" @click="submitForm('add')">老师数据汇总,确认提交<i class="el-icon-upload el-icon--right"></i></el-button>
                    </el-col>
                </el-row>
            </el-form>
    </div>
</template>

<script>
    import {mapActions, mapState, mapGetters} from 'vuex'
    import headTop from '../components/headTop'
    import {getUserList, getUserCount,addemployWeekTotal} from '@/api/getData'
    import ElCol from "element-ui/packages/col/src/col";
    import ElRow from "element-ui/packages/row/src/row";
    import ElForm from "../../node_modules/element-ui/packages/form/src/form.vue";

    export default {
        computed: {
            ...mapGetters(['adminInfo','monthsList','weeksList','schoolList', 'channelList', 'periodList', 'empschoolMap', 'sexList', 'paytypeList','subjectList','cardList'])
        },
        data() {
            return {
                empsList:null,
                selectData:{},
                formData:{
                    year:'2018',
                },
                empsList:null,
                tableData: [],
                currentRow: null,
                offset: 0,
                limit: 20,
                count: 0,
                currentPage: 1,
            }
        },
        components: {
            ElForm,
            ElRow,
            ElCol,
            headTop,
        },
        created() {
            this.initData();
        },
        mounted() {
            if (this.periodList==null) {
                this.getPeriod();
            }
            if (this.empschoolMap == null) {
                this.fillSchoolEmps();
            }
            if (this.schoolList == null) {
                this.getAllSchool();
            }
        },
        methods: {
            ...mapActions(['getGiftList','getPeriod', 'setEmpschool', 'deleteEmpschool', 'fillSchoolEmps', 'getAllSchool']),

            schoolchange(schoolid) {
                var v = this.empschoolMap;
                var list = v[schoolid];
                this.empsList = [];
                if (list != null) {
                    list.forEach(item => {
                        this.empsList.push(item);
                    });
                }
            },
            async submitForm(formName) {
                try {
                    this.formData.eid=this.selectData.eid;
                    this.formData.operatorid=this.adminInfo.id;
                    var data = {"data": this.formData}
                    alert(JSON.stringify(data));
                    let result = await addemployWeekTotal(data);
                    if (result.success == true) {
                        this.$message({
                            type: 'success',
                            message: '添加成功'
                        });
                        this.formData = {}
                    }
                } catch (err) {
                    console.log(err);
                }
            },
            async initData() {
                try {
                    const countData = await getUserCount();
                    if (countData.status == 1) {
                        this.count = countData.count;
                    } else {
                        throw new Error('获取数据失败');
                    }
                    this.getUsers();
                } catch (err) {
                    console.log('获取数据失败', err);
                }
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.offset = (val - 1) * this.limit;
                this.getUsers()
            },
            async getUsers() {
                const Users = await getUserList({offset: this.offset, limit: this.limit});
                this.tableData = [];
                Users.forEach(item => {
                    const tableData = {};
                    tableData.username = item.username;
                    tableData.registe_time = item.registe_time;
                    tableData.city = item.city;
                    this.tableData.push(tableData);
                })
            }
        },
    }
</script>

<style lang="less">
    @import '../style/mixin';

    .table_container {
        padding: 20px;
    }

    .el-form-item__label {
        width: 120px;
        text-align: right;
    }
</style>
